<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Detail</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/imgs/美女.jpg" />
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <style>
        p{
            vertical-align: middle;
            font-size: 30px;
            color: #FF0036;
            font-weight: bolder;
            font-family: Arial;
            -webkit-font-smoothing: antialiased;
        }
        span{
            color: #FF0036;
            font-size: 18px;
            float: left;
        }
        img{
            cursor: pointer;
            margin: 2px;
        }
    </style>
</head>
<body>
<div>
    <a style="font-size: larger" href="/books">首页</a>
</div>
<div>
    <img th:src="${book.getPath()}" alt="11" width="300" height="300"><br>
    <p th:text="'￥'+${book.getPrice()}"></p>
    <button class="btn-danger" th:id="${book.getId()}" onclick="deleteBook(this)">删除</button>
</div>
<script>
    /*$(function () {
        alert(11);
    });*/
    function deleteBook(o) {
        const id = $(o).attr("id");
        $.ajax({
            url: "/book/"+id,
            type: "delete",
            async: false,
            // async: false
            success: function (data) {
                console.log(data);
                window.location.href="/books";
            }
        });
    }
</script>
</body>
</html>